<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dialog | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Dialog | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Dialog</h1>
          <ul class="docs-index"></ul>
          <p>Dialog is a small content pane that pops up over App's main content. Dialogs are usualy used to ask something from a user, or to notify or warn a user. Dialog, as all other modals, is part of so called "Temporary Views".</p>
          <p>Dialog can only be opened by using JavaScript. So lets look at related App methods to work with dialogs.</p>
          <h2>Dialog App Methods</h2>
          <p>Lets look at related App methods to work with Dialog:</p>
          <div class="method-wrap">
            <p><span class="method">app.dialog.create(<span>parameters</span>)</span>- create Dialog instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span>. Object with dialog parameters</li>
            </ul>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.dialog.destroy(<span>el</span>)</span>- destroy Dialog instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector) or <span class="parameter-type">object</span>. Dialog element or Dialog instance to destroy.</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.dialog.get(<span>el</span>)</span>- get Dialog instance by HTML element</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Dialog element.</li>
            </ul>
            <p class="method-returns">Method returns Dialog's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.dialog.open(<span>el</span>, <span>animate</span>)</span>- opens Dialog</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Dialog element to open.</li>
              <li><span class="parameter">animate</span> - <span class="parameter-type">boolean</span>. Open Dialog with animation.</li>
            </ul>
            <p class="method-returns">Method returns Dialog's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.dialog.close(<span>el</span>, <span>animate</span>)</span>- closes Dialog</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Dialog element to close.</li>
              <li><span class="parameter">animate</span> - <span class="parameter-type">boolean</span>. Close Dialog with animation.</li>
            </ul>
            <p class="method-returns">Method returns Dialog's instance</p>
          </div>
          <h2>Dialog Parameters</h2>
          <p>Now lets look at list of available parameters we need to create Dialog:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>el</td>
                <td>HTMLElement</td>
                <td></td>
                <td>Dialog element. Can be useful if you already have Dialog element in your HTML and want to create new instance using this element</td>
              </tr>
              <tr>
                <td>backdrop</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enables Dialog backdrop (dark semi transparent layer behind)</td>
              </tr>
              <tr>
                <td>closeByBackdropClick</td>
                <td>boolean</td>
                <td>true</td>
                <td>When enabled, dialog will be closed on backdrop click</td>
              </tr>
              <tr>
                <td>animate</td>
                <td>boolean</td>
                <td>true</td>
                <td>Whether the Dialog should be opened/closed with animation or not. Can be overwritten in <code>.open()</code> and <code>.close()</code> methods</td>
              </tr>
              <tr>
                <td>title</td>
                <td>string</td>
                <td></td>
                <td>Dialog title</td>
              </tr>
              <tr>
                <td>text</td>
                <td>string</td>
                <td></td>
                <td>Dialog inner text</td>
              </tr>
              <tr>
                <td>content</td>
                <td>string</td>
                <td></td>
                <td>Custom Dialog content that follows dialog text</td>
              </tr>
              <tr>
                <td>buttons</td>
                <td>array</td>
                <td>[]</td>
                <td>Array with dialog buttons</td>
              </tr>
              <tr>
                <td>verticalButtons</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enables vertical buttons layout</td>
              </tr>
              <tr>
                <td>destroyOnClose</td>
                <td>boolean</td>
                <td>false</td>
                <td>When enabled will automatically destroy Dialog on close</td>
              </tr>
              <tr>
                <td>onClick</td>
                <td>function(dialog, index)</td>
                <td></td>
                <td>Callback function that will be executed after click on the Dialog button. As an arguments it received dialog instance and clicked button index number</td>
              </tr>
              <tr>
                <td>cssClass</td>
                <td>string</td>
                <td></td>
                <td>Additional css class to add</td>
              </tr>
              <tr>
                <td>on</td>
                <td>object</td>
                <td></td>
                <td>
                  Object with events handlers. For example:<pre><code class="js"><span class="token keyword">var</span> dialog <span class="token operator">=</span> app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  text<span class="token punctuation">:</span> <span class="token string">'Hello World'</span><span class="token punctuation">,</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">opened</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Dialog opened'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
                </td>
              </tr>
            </tbody>
          </table>
          <h3>Button Parameters</h3>
          <p>Each Button in <code>buttons</code> array must be presented as object with button parameters:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>text</td>
                <td>string</td>
                <td></td>
                <td>String with Button's text (could be HTML string)</td>
              </tr>
              <tr>
                <td>bold</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enables bold button text</td>
              </tr>
              <tr>
                <td>color</td>
                <td>string</td>
                <td></td>
                <td>Button color, one of <a href="color-themes.html">default colors</a></td>
              </tr>
              <tr>
                <td>close</td>
                <td>boolean</td>
                <td>true</td>
                <td>If enabled then button click will close Dialog</td>
              </tr>
              <tr>
                <td>cssClass</td>
                <td>string</td>
                <td></td>
                <td>Additional button CSS class</td>
              </tr>
              <tr>
                <td>keyCodes</td>
                <td>array</td>
                <td>[]</td>
                <td>Array with keyboard keycodes that will be used to trigger button click. For example, key code <code>13</code> means that button click will be triggered on Enter key press</td>
              </tr>
              <tr>
                <td>onClick</td>
                <td>function(dialog, e)</td>
                <td></td>
                <td>Callback function that will be executed after click on this button</td>
              </tr>
            </tbody>
          </table>
          <h2>Dialog Methods & Properties</h2>
          <p>So to create a Dialog we have to call:</p><pre><code class="js"><span class="token keyword">var</span> dialog <span class="token operator">=</span> app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">/* parameters */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <p>After that we have its initialized instance (like <code>dialog</code> variable in example above) with useful methods and properties:</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Properties</th>
              </tr>
              <tr>
                <td>dialog.app</td>
                <td>Link to global app instance</td>
              </tr>
              <tr>
                <td>dialog.el</td>
                <td>Dialog HTML element</td>
              </tr>
              <tr>
                <td>dialog.$el</td>
                <td>Dom7 instance with dialog HTML element</td>
              </tr>
              <tr>
                <td>dialog.backdropEl</td>
                <td>Backdrop HTML element</td>
              </tr>
              <tr>
                <td>dialog.$backdropEl</td>
                <td>Dom7 instance with backdrop HTML element</td>
              </tr>
              <tr>
                <td>dialog.params</td>
                <td>Dialog parameters</td>
              </tr>
              <tr>
                <td>dialog.opened</td>
                <td>Boolean prop indicating whether dialog is opened or not</td>
              </tr>
              <tr>
                <th colspan="2">Methods</th>
              </tr>
              <tr>
                <td>dialog.open(<span>animate</span>)</td>
                <td>Open dialog. Where
                  <ul class="method-parameters">
                    <li><span class="parameter">animate</span> - <span class="parameter-type">boolean</span> (by default <code>true</code>) - defines whether it should be opened with animation</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>dialog.close(<span>animate</span>)</td>
                <td>Close dialog. Where
                  <ul class="method-parameters">
                    <li><span class="parameter">animate</span> - <span class="parameter-type">boolean</span> (by default <code>true</code>) - defines whether it should be closed with animation</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>dialog.setProgress(<span>progress</span>, <span>duration</span>)</td>
                <td>Sets dialog progress when Dialog Progress shortcut in use
                  <ul class="method-parameters">
                    <li><span class="parameter">progress</span> - <span class="parameter-type">number</span> - progressbar progress (from 0 to 100)</li>
                    <li><span class="parameter">duration</span> - <span class="parameter-type">number</span> (in ms) - progressbar progress change duration</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>dialog.setTitle(<span>title</span>)</td>
                <td>Sets dialog's title
                  <ul class="method-parameters">
                    <li><span class="parameter">title</span> - <span class="parameter-type">string</span> - new dialog title</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>dialog.setText(<span>text</span>)</td>
                <td>Sets dialog's text
                  <ul class="method-parameters">
                    <li><span class="parameter">title</span> - <span class="parameter-type">string</span> - new dialog text</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>dialog.destroy()</td>
                <td>Destroy dialog</td>
              </tr>
              <tr>
                <td>dialog.on(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler</td>
              </tr>
              <tr>
                <td>dialog.once(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler that will be removed after it was fired</td>
              </tr>
              <tr>
                <td>dialog.off(<span>event</span>, <span>handler</span>)</td>
                <td>Remove event handler</td>
              </tr>
              <tr>
                <td>dialog.off(<span>event</span>)</td>
                <td>Remove all handlers for specified event</td>
              </tr>
              <tr>
                <td>dialog.emit(<span>event</span>, <span>...args</span>)</td>
                <td>Fire event on instance</td>
              </tr>
            </tbody>
          </table>
          <h2>Dialog Events</h2>
          <p>Dialog will fire the following DOM events on dialog element and events on app and dialog instance:</p>
          <h3>DOM Events</h3>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>dialog:open</td>
                <td>Dialog Element<span>&lt;div class="dialog"&gt;</span></td>
                <td>Event will be triggered when Dialog starts its opening animation</td>
              </tr>
              <tr>
                <td>dialog:opened</td>
                <td>Dialog Element<span>&lt;div class="dialog"&gt;</span></td>
                <td>Event will be triggered after Dialog completes its opening animation</td>
              </tr>
              <tr>
                <td>dialog:close</td>
                <td>Dialog Element<span>&lt;div class="dialog"&gt;</span></td>
                <td>Event will be triggered when Dialog starts its closing animation</td>
              </tr>
              <tr>
                <td>dialog:closed</td>
                <td>Dialog Element<span>&lt;div class="dialog"&gt;</span></td>
                <td>Event will be triggered after Dialog completes its closing animation</td>
              </tr>
            </tbody>
          </table>
          <h3>App and Dialog Instance Events</h3>
          <p>Dialog instance emits events on both self instance and app instance. App instance events has same names prefixed with <code>dialog</code>.</p>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Arguments</th>
                <th>Target</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>open</td>
                <td><span>dialog</span></td>
                <td>dialog</td>
                <td rowspan="2">Event will be triggered when Dialog starts its opening animation. As an argument event handler receives dialog instance</td>
              </tr>
              <tr>
                <td>dialogOpen</td>
                <td><span>dialog</span></td>
                <td>app</td>
              </tr>
              <tr>
                <td>opened</td>
                <td><span>dialog</span></td>
                <td>dialog</td>
                <td rowspan="2">Event will be triggered after Dialog completes its opening animation. As an argument event handler receives dialog instance</td>
              </tr>
              <tr>
                <td>dialogOpened</td>
                <td><span>dialog</span></td>
                <td>app</td>
              </tr>
              <tr>
                <td>close</td>
                <td><span>dialog</span></td>
                <td>dialog</td>
                <td rowspan="2">Event will be triggered when Dialog starts its closing animation. As an argument event handler receives dialog instance</td>
              </tr>
              <tr>
                <td>dialogClose</td>
                <td><span>dialog</span></td>
                <td>app</td>
              </tr>
              <tr>
                <td>closed</td>
                <td><span>dialog</span></td>
                <td>dialog</td>
                <td rowspan="2">Event will be triggered after Dialog completes its closing animation. As an argument event handler receives dialog instance</td>
              </tr>
              <tr>
                <td>dialogClosed</td>
                <td><span>dialog</span></td>
                <td>app</td>
              </tr>
              <tr>
                <td>beforeDestroy</td>
                <td><span>dialog</span></td>
                <td>dialog</td>
                <td rowspan="2">Event will be triggered right before Dialog instance will be destroyed. As an argument event handler receives dialog instance</td>
              </tr>
              <tr>
                <td>dialogBeforeDestroy</td>
                <td><span>dialog</span></td>
                <td>app</td>
              </tr>
            </tbody>
          </table>
          <h2>Dialog Shortcuts</h2>
          <p>There are a few shortcut methods which that make creating dialogs much easier.</p>
          <p>First lets check the global app parameters which help to configure such shortcuts and also used for localization purposes.</p>
          <h3>Dialog Shortcuts Parameters</h3>
          <p>The following global dialog shortcut parameters can be passed on <a href="init-app.html">app initialization</a> under <code>dialog</code> property:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  dialog<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// set default title for all dialog shortcuts</span>
    title<span class="token punctuation">:</span> <span class="token string">'My App'</span><span class="token punctuation">,</span>
    <span class="token comment">// change default "OK" button text</span>
    buttonOk<span class="token punctuation">:</span> <span class="token string">'Done'</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>title</td>
                <td>string</td>
                <td></td>
                <td>Default dialogs shortcuts title. If not specified, will be equal to <code>app.name</code></td>
              </tr>
              <tr>
                <td>buttonOk</td>
                <td>string</td>
                <td>OK</td>
                <td>Default "OK" button text</td>
              </tr>
              <tr>
                <td>buttonCancel</td>
                <td>string</td>
                <td>Cancel</td>
                <td>Default "Cancel" button text</td>
              </tr>
              <tr>
                <td>usernamePlaceholder</td>
                <td>string</td>
                <td>Username</td>
                <td>Default username field placeholder in Login dialog</td>
              </tr>
              <tr>
                <td>passwordPlaceholder</td>
                <td>string</td>
                <td>Password</td>
                <td>Default password field placeholder in Login & Password dialogs</td>
              </tr>
              <tr>
                <td>preloaderTitle</td>
                <td>string</td>
                <td>Loading...</td>
                <td>Default title for Preloader dialog</td>
              </tr>
              <tr>
                <td>progressTitle</td>
                <td>string</td>
                <td>Loading...</td>
                <td>Default title for Progress dialog</td>
              </tr>
              <tr>
                <td>destroyPredefinedDialogs</td>
                <td>boolean</td>
                <td>true</td>
                <td>Will automatically destroy all predefined dialogs (Alert, Confirm, Prompt, etc.) on close</td>
              </tr>
              <tr>
                <td>keyboardActions</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enables keyboard shortcuts (Enter and Esc) keys for predefined dialogs (Alert, Confirm, Prompt, Login, Password) "Ok" and "Cancel" buttons</td>
              </tr>
            </tbody>
          </table>
          <p>Now lets look at available dialog shortcuts</p>
          <h3>Alert</h3>
          <p>To create Alert dialog we need to use the following app methods:</p>
          <div class="method-wrap">
            <p><span class="method">app.dialog.alert(<span>text</span>, <span>title</span>, <span>callback</span>)</span>- create Alert Dialog and open it</p>
            <ul class="method-parameters">
              <li><span class="parameter">text</span> - <span class="parameter-type">string</span>. Alert dialog text</li>
              <li><span class="parameter">title</span> - <span class="parameter-type">string</span>. Alert dialog title</li>
              <li><span class="parameter">callback</span> - <span class="parameter-type">function</span>. Optional. Callback function that will be executed after user clicks on Alert button</li>
            </ul>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.dialog.alert(<span>text</span>, <span>callback</span>)</span>- create Alert Dialog with default title and open it</p>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <h3>Confirm</h3>
          <p>Confirm dialog is usualy used when it is required to confirm some action. To open the Confirm modal we should also call one of the following App methods:</p>
          <div class="method-wrap">
            <p><span class="method">app.dialog.confirm(<span>text</span>, <span>title</span>, <span>callbackOk</span>, <span>callbackCancel</span>)</span>- create Confirm Dialog and open it</p>
            <ul class="method-parameters">
              <li><span class="parameter">text</span> - <span class="parameter-type">string</span>. Confirm dialog text</li>
              <li><span class="parameter">title</span> - <span class="parameter-type">string</span>. Confirm dialog title</li>
              <li><span class="parameter">callbackOk</span> - <span class="parameter-type">function</span>. Optional. Callback function that will be executed when user click "Ok" button on Confirm dialog (when user confirms action)</li>
              <li><span class="parameter">callbackCancel</span> - <span class="parameter-type">function</span>. Optional. Callback function that will be executed when user click "Cancel" button on Confirm dialog (when user dismisses action)</li>
            </ul>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.dialog.confirm(<span>text</span>, <span>callbackOk</span>, <span>callbackCancel</span>)</span>- create Confirm Dialog with default title and open it</p>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <h3>Prompt</h3>
          <p>Prompt dialog is used when it is required to get some data/answer from user. To open Prompt dialog we should also call one of the following App methods:</p>
          <div class="method-wrap">
            <p><span class="method">app.dialog.prompt(<span>text</span>, <span>title</span>, <span>callbackOk</span>, <span>callbackCancel</span>, <span>defaultValue</span>)</span>- create Prompt Dialog and open it</p>
            <ul class="method-parameters">
              <li><span class="parameter">text</span> - <span class="parameter-type">string</span>. Prompt dialog text</li>
              <li><span class="parameter">title</span> - <span class="parameter-type">string</span>. Prompt dialog title</li>
              <li><span class="parameter">callbackOk</span> - <span class="parameter-type">function(value)</span>. Optional. Callback function that will be executed when user click "Ok" button on Prompt dialog. As an argument function receives value of text input</li>
              <li><span class="parameter">callbackCancel</span> - <span class="parameter-type">function(value)</span>. Optional. Callback function that will be executed when user click "Cancel" button on Prompt dialog. As an argument function receives value of text input</li>
              <li><span class="parameter">defaultValue</span> - <span class="parameter-type">string</span>. Optional. Prompt input default value</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.dialog.prompt(<span>text</span>, <span>callbackOk</span>, <span>callbackCancel</span>, <span>defaultValue</span>)</span>- create Prompt Dialog with default title and open it</p>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <h3>Login</h3>
          <div class="method-wrap">
            <p><span class="method">app.dialog.login(<span>text</span>, <span>title</span>, <span>callbackOk</span>, <span>callbackCancel</span>)</span>- create Login Dialog and open it</p>
            <ul class="method-parameters">
              <li><span class="parameter">text</span> - <span class="parameter-type">string</span>. Login dialog text</li>
              <li><span class="parameter">title</span> - <span class="parameter-type">string</span>. Login dialog title</li>
              <li><span class="parameter">callbackOk</span> - <span class="parameter-type">function(username, password)</span>. Optional. Callback function that will be executed when user click "Ok" button on Login dialog. As an argument function receives username and password values</li>
              <li><span class="parameter">callbackCancel</span> - <span class="parameter-type">function(username, password)</span>. Optional. Callback function that will be executed when user click "Cancel" button on Login dialog. As an argument function receives username and password values</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.dialog.login(<span>text</span>, <span>callbackOk</span>, <span>callbackCancel</span>)</span>- create Login Dialog with default title and open it</p>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <h3>Password</h3>
          <p>Password dialog is useful in case you need to request only the password</p>
          <div class="method-wrap">
            <p><span class="method">app.dialog.password(<span>text</span>, <span>title</span>, <span>callbackOk</span>, <span>callbackCancel</span>)</span>- create Password Dialog and open it</p>
            <ul class="method-parameters">
              <li><span class="parameter">text</span> - <span class="parameter-type">string</span>. Password dialog text</li>
              <li><span class="parameter">title</span> - <span class="parameter-type">string</span>. Password dialog title</li>
              <li><span class="parameter">callbackOk</span> - <span class="parameter-type">function(password)</span>. Optional. Callback function that will be executed when user click "Ok" button on Password dialog. As an argument function receives password value</li>
              <li><span class="parameter">callbackCancel</span> - <span class="parameter-type">function(password)</span>. Optional. Callback function that will be executed when user click "Cancel" button on Password dialog. As an argument function receives password value</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.dialog.password(<span>text</span>, <span>callbackOk</span>, <span>callbackCancel</span>)</span>- create Password Dialog with default title and open it</p>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <h3>Preloader</h3>
          <p>Preloader dialog is used to indicate some background activity (like Ajax request) and to block any user actions during this activity. To open Preloader dialog we should also call appropriate App method:</p>
          <div class="method-wrap">
            <p><span class="method">app.dialog.preloader(<span>title</span>, <span>color</span>)</span>- create Preloader Dialog and open it</p>
            <ul class="method-parameters">
              <li><span class="parameter">title</span> - <span class="parameter-type">string</span>. Optional. Preloader dialog title</li>
              <li><span class="parameter">color</span> - <span class="parameter-type">string</span>. Optional. Preloader color. One of the <a href="color-themes.html">default colors</a></li>
            </ul>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <h3>Progress</h3>
          <p>Same as Preloader dialog but with <a href="progressbar.html">progressbar</a> instead of preloader.</p>
          <div class="method-wrap">
            <p><span class="method">app.dialog.progress(<span>title</span>, <span>progress</span>, <span>color</span>)</span>- create Progress Dialog and open it</p>
            <ul class="method-parameters">
              <li><span class="parameter">title</span> - <span class="parameter-type">string</span>. Optional. Progress dialog title</li>
              <li><span class="parameter">progress</span> - <span class="parameter-type">number</span>. Optional. Progressbar progress (from 0 to 100). If no <code>number</code> passed then it will have infinite progressbar.</li>
              <li><span class="parameter">color</span> - <span class="parameter-type">string</span>. Optional. Progressbar color. One of <a href="color-themes.html">default colors</a></li>
            </ul>
            <p class="method-returns">Method returns created Dialog's instance</p>
          </div>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/core/dialog.html">Examples</h2><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
  ...
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block block-strong<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col button open-alert<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Alert<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col button open-confirm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Confirm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col button open-prompt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Prompt<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col button open-login<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Login<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col button open-password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Vertical Buttons<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block block-strong<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button open-vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Vertical Buttons<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Preloader Dialog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block block-strong<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col button open-preloader<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Preloader<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col button open-preloader-custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Progress Dialog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block block-strong<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col button open-progress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Determined<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col button open-progress-infinite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Infinite<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> $$ <span class="token operator">=</span> Dom7<span class="token punctuation">;</span>

<span class="token comment">// Alert</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-alert'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Confirm</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-confirm'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Are you feel good today?'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Great!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Prompt</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-prompt'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">'What is your name?'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Are you sure that your name is '</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">'?'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Ok, your name is '</span> <span class="token operator">+</span> name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Login</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-login'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">login</span><span class="token punctuation">(</span><span class="token string">'Enter your username and password'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">username<span class="token punctuation">,</span> password</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Thank you!&lt;br>Username:'</span> <span class="token operator">+</span> username <span class="token operator">+</span> <span class="token string">'&lt;br>Password:'</span> <span class="token operator">+</span> password<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Password</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-password'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">password</span><span class="token punctuation">(</span><span class="token string">'Enter your username and password'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">password</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Thank you!&lt;br>Password:'</span> <span class="token operator">+</span> password<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Vertical Buttons</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-vertical'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Vertical Buttons'</span><span class="token punctuation">,</span>
    text<span class="token punctuation">:</span> <span class="token string">'Dialog with vertical buttons'</span><span class="token punctuation">,</span>
    buttons<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        text<span class="token punctuation">:</span> <span class="token string">'Button 1'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        text<span class="token punctuation">:</span> <span class="token string">'Button 2'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        text<span class="token punctuation">:</span> <span class="token string">'Button 3'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    verticalButtons<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Preloader</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-preloader'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">preloader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Preloader with custom text</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-preloader-custom'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">preloader</span><span class="token punctuation">(</span><span class="token string">'My text...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Progress</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-progress'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> progress <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> dialog <span class="token operator">=</span> app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">progress</span><span class="token punctuation">(</span><span class="token string">'Loading assets'</span><span class="token punctuation">,</span> progress<span class="token punctuation">)</span><span class="token punctuation">;</span>
  dialog<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span><span class="token string">'Image 1 of 10'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> interval <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    progress <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>
    dialog<span class="token punctuation">.</span><span class="token function">setProgress</span><span class="token punctuation">(</span>progress<span class="token punctuation">)</span><span class="token punctuation">;</span>
    dialog<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span><span class="token string">'Image '</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>progress<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">' of 10'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span>progress <span class="token operator">===</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">clearInterval</span><span class="token punctuation">(</span>interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
      dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Progress Infinite</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.open-progress-infinite'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">progress</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>